<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>

    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <style type="text/css">
        #addDiv{
            display: none;
            position: absolute;
            left: 50px;
            top: 40px;
        }
        #shadow{
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            display: none;
            opacity:0.8;
            background-color: darkgrey;
           /* border:5px solid red;*/
        }
    </style>
    <script src="js/jquery.js"></script>
</head>
<body>

<!--主体内容-->
<section class="publicMian">

    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>课程管理</span>
        </div>

        <div class="search">
            <form action="subject.do" method="get" id="seachForm">
                <input type="hidden" name="pageNo" id="pageNo" value=""/>
                <span>课程名称：</span>
                <input type="text"  name="subjectname" value="" placeholder="请输入课程名称"/>
                <input type="submit" id="search" value="查询"/>
                <a href="#" id="toAdd">添加</a>
            </form>
        </div>
        <!--供应商操作表格-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
            <tr class="firstTr">
                <th width="10%">编号</th>
                <th width="20%">课程名</th>
                <th width="10%">课时</th>
                <th width="10%">年级</th>
                <th width="30%">操作</th>
            </tr>

        </table>
        <p align="center" class="pager">
            <a id="first" href="#" data-page="1">首页</a>

            <a id="prev" href="#" data-page="1">上一页</a>

            <input type="number" name="pa" id="pa" value="1" style="width: 25px" size="4" min="1" max="1"/>/<span
                id="total">1</span>
            <button type="button" id="gotoPage">Go</button>

            <a href="#" id="next" data-page="1">下一页</a>

            <a href="#" id="last" data-page="1">最后一页</a>
        </p>
    </div>
</section>

<div id="shadow"></div>
<div id="addDiv" >
    <form action="#" id="addForm">
        <p>
            <input type="text" required name="subjectname" placeholder="课程名称"/>
        </p>
        <p>
            <input type="number" required name="classhour" min="1" placeholder="课时"/>
        </p>
        <p>
            <select name="gradeid" id="gradeid">

            </select>
        </p>
        <p>
            <input type="submit" id="btnSave" value="保存"/>
            <input type="reset" value="重填"/>
            <input type="button" value="返回"/>
        </p>
    </form>
</div>

<script>
    $(function () {
        var pageNo = 1;
        var subjectname = "";

        function doLoad() {
            $.get("subjectajax.do", {pageNo: pageNo, subjectname: subjectname}, function (p) {
                let tab = $(".providerTable");
                tab.find("tr:gt(0)").remove();
                //给分页的链接，加上参数
                $(".pager #prev").data("page",p.pageNo<=1?1:p.pageNo-1);
                $(".pager #next").data("page",p.pageNo<p.totalPages?p.pageNo+1:p.totalPages);
                $(".pager #last").data("page",p.totalPages);
                $("#pa").val(p.pageNo);
                $("#pa").attr("max",p.totalPages);
                $("#total").html(p.totalPages);
                
                $.each(p.datas, function (i, d) {
                    let tr = $("<tr></tr>");
                    tr.append("<td>" + d.id + "</td>");
                    tr.append("<td>" + d.subjectname + "</td>");
                    tr.append("<td>" + d.classhour + "</td>");
                    tr.append("<td>" + d.gradeName + "</td>");
                    tr.append("<td><a href='updateSubject.html?id="+d.id+"' data-id='"+d.id+"' class='updateSubject'>修改</a><a href='#'>删除</a></td>");
                    tab.append(tr);
                });
            });
        }
        doLoad();
        $("#search").click(function () {

            subjectname = $("input[name=subjectname]").val();
            pageNo = 1;
            //
            doLoad();
            //
            return false;//提交失效
        });
        $(".pager a").click(function () {
            pageNo=$(this).data("page");
            doLoad();
            return false;
        });
        $("#gotoPage").click(function () {
            pageNo=$(this).prev().val();
            doLoad();
            return false;
        });
        $("#toAdd").click(function () {
            $.get("grades.do",function (data) {
               let g=$("#gradeid");
               $.each(data,function(i,d){
                  g.append(`<option value=${d.id}>${d.gname}</option>`)
               });
            });
            $("#shadow").show();
            $("#addDiv").show(300);
            return false;
        });
        $("#btnSave").click(function () {
            $.post("subjectAdd.do",$("#addForm").serialize(),function (data) {
                //alert(JSON.stringify(data));
                if(data.success){
                    $("#shadow").hide();
                    $("#addDiv").hide(300);
                    document.getElementById("addForm").reset();
                    window.location.reload();
                }else{
                    alert("出错了："+data.msg);
                }
            }).fail(function(e){
                alert("请求出错了："+e.responseText);
            });
            return false;
        });

        // $(".providerTable").on("click",".updateSubject",function () {
        //
        // });
    });
</script>

</body>
</html>